<template>
	<view class="product-list-page">
		<!-- 搜索框 -->
		<view class="search-bar">
			<input type="text" v-model="searchKey" placeholder="请输入项目名称进行搜索" @input="searchProducts" />
		</view>

		<!-- 项目分类筛选 -->
		<view class="category-filter">
			<view v-for="(category, categoryIndex) in categories" :key="categoryIndex"
				:class="{ 'active-category': selectedCategoryId === category.id }"
				@click="filterProductsByCategory(category.id)">
				{{ category.name }}
			</view>
		</view>

		<!-- 项目列表展示 -->
		<view class="product-list">
			<view v-for="(product, productIndex) in products" :key="productIndex" class="product-item"
				@click="goToProductDetail(product.id)">
				<image :src="product.imageUrl" class="product-image"></image>
				<view class="product-info">
					<view class="product-name">{{ product.name }}</view>
					<view class="product-price">￥{{ product.price }}</view>
				</view>
			</view>
		</view>

		<!-- 加载更多按钮 -->
		<view class="load-more" v-if="!isLoading && hasMoreProducts" @click="loadMoreProducts">加载更多</view>

		<!-- 加载提示 -->
		<view class="loading-text" v-if="isLoading">正在加载，请稍候...</view>
	</view>
</template>

<script>
	import {
		defineComponent,
		ref,
		onMounted
	} from 'vue';

	export default defineComponent({
		setup() {
			// 响应式数据
			const searchKey = ref('');
			const products = ref([]);
			const currentPage = ref(1);
			const pageLimit = ref(10);
			const isLoading = ref(false);
			const hasMoreProducts = ref(true);
			const categories = ref([]);
			const selectedCategoryId = ref(null);

			// 获取项目分类数据
			const getCategories = async () => {
				try {
					const res = await uni.request({
						url: 'https://your-api-domain.com/api/categories',
					});
					if (res.statusCode === 200) {
						categories.value = res.data;
						if (categories.value.length > 0) {
							selectedCategoryId.value = categories.value[0].id;
						}
					} else {
						uni.showToast({
							title: '获取项目分类失败',
							icon: 'none',
						});
					}
				} catch (error) {
					uni.showToast({
						title: '网络请求失败，请检查网络连接',
						icon: 'none',
					});
				}
			};

			// 根据分类ID筛选项目列表
			const filterProductsByCategory = (categoryId) => {
				selectedCategoryId.value = categoryId;
				currentPage.value = 1;
				products.value = [];
				hasMoreProducts.value = true;
				getProducts();
			};

			// 根据搜索关键词搜索项目列表
			const searchProducts = () => {
				currentPage.value = 1;
				products.value = [];
				hasMoreProducts.value = true;
				getProducts();
			};

			// 获取项目列表数据
			const getProducts = async () => {
				isLoading.value = true;
				try {
					const res = await uni.request({
						url: `https://your-api-domain.com/api/products?categoryId=${selectedCategoryId.value}&searchKey=${searchKey.value}&page=${currentPage.value}&limit=${pageLimit.value}`,
					});
					if (res.statusCode === 200) {
						const newProducts = res.data.products;
						if (newProducts.length < pageLimit.value) {
							hasMoreProducts.value = false;
						}
						products.value = [...products.value, ...newProducts];
					} else {
						uni.showToast({
							title: '获取项目列表失败',
							icon: 'none',
						});
					}
				} catch (error) {
					uni.showToast({
						title: '网络请求失败，请检查网络连接',
						icon: 'none',
					});
				} finally {
					isLoading.value = false;
				}
			};

			// 加载更多项目数据
			const loadMoreProducts = () => {
				if (!isLoading.value && hasMoreProducts.value) {
					currentPage.value++;
					getProducts();
				}
			};

			// 跳转到项目详情页面
			const goToProductDetail = (productId) => {
				uni.navigateTo({
					url: `/pages/product-detail/product-detail?id=${productId}`,
				});
			};

			// 页面加载时获取数据
			onMounted(() => {
				getCategories();
				getProducts();
			});

			return {
				searchKey,
				products,
				currentPage,
				pageLimit,
				isLoading,
				hasMoreProducts,
				categories,
				selectedCategoryId,
				filterProductsByCategory,
				searchProducts,
				getProducts,
				loadMoreProducts,
				goToProductDetail,
			};
		},
	});
</script>

<style scoped>
	.product-list-page {
		padding: 20rpx;
	}

	.search-bar {
		background-color: #F6F6F6;
		padding: 10rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.category-filter {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
	}

	.category-filter view {
		padding: 10rpx 20rpx;
		background-color: #EFEFEF;
		border-radius: 8rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		cursor: pointer;
		width: 55rpx;
	}

	.category-filter.active-category {
		background-color: #3278FF;
		color: #FFFFFF;
	}

	.product-list {
		display: flex;
		flex-wrap: wrap;
	}

	.product-item {
		width: 45%;
		margin-right: 10rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
	}

	.product-image {
		width: 100%;
		height: 200rpx;
		border-top-left-radius: 8rpx;
		border-top-right-radius: 8rpx;
	}

	.product-info {
		padding: 10rpx;
	}

	.product-name {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		margin-bottom: 5rpx;
	}

	.product-price {
		font-weight: 400;
		font-size: 24rpx;
		color: #FF3232;
	}

	.load-more {
		text-align: center;
		padding: 10rpx;
		background-color: #3278FF;
		color: #FFFFFF;
		border-radius: 8rpx;
		cursor: pointer;
		margin-top: 20rpx;
	}

	.loading-text {
		text-align: center;
		margin-top: 20rpx;
	}
</style>